<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SmartInput SSL证书测试</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #2563eb;
            text-align: center;
            margin-bottom: 30px;
        }
        .step {
            margin: 20px 0;
            padding: 15px;
            border-left: 4px solid #2563eb;
            background: #f8fafc;
        }
        .step h3 {
            margin: 0 0 10px 0;
            color: #1e40af;
        }
        .url-link {
            display: inline-block;
            padding: 8px 15px;
            background: #2563eb;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            margin: 5px 0;
            font-family: monospace;
        }
        .url-link:hover {
            background: #1d4ed8;
        }
        .status {
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
            font-weight: bold;
        }
        .success {
            background: #dcfce7;
            color: #166534;
            border: 1px solid #bbf7d0;
        }
        .error {
            background: #fef2f2;
            color: #dc2626;
            border: 1px solid #fecaca;
        }
        .warning {
            background: #fefce8;
            color: #ca8a04;
            border: 1px solid #fde68a;
        }
        .test-button {
            background: #10b981;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin: 10px 5px;
        }
        .test-button:hover {
            background: #059669;
        }
        .test-button:disabled {
            background: #9ca3af;
            cursor: not-allowed;
        }
        #results {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔒 SmartInput SSL证书接受测试</h1>
        
        <div class="step">
            <h3>步骤1: 手动访问HTTPS地址</h3>
            <p>请依次点击以下链接，并在每个页面中接受SSL证书：</p>
            <div>
                <a href="https://localhost:3001/health" target="_blank" class="url-link">
                    https://localhost:3001/health
                </a>
            </div>
            <div>
                <a href="https://127.0.0.1:3001/health" target="_blank" class="url-link">
                    https://127.0.0.1:3001/health
                </a>
            </div>
            <div>
                <a href="https://192.168.137.122:3001/health" target="_blank" class="url-link">
                    https://192.168.137.122:3001/health
                </a>
            </div>
            <div class="warning">
                ⚠️ 当看到"您的连接不是私密连接"警告时：<br>
                1. 点击"高级"<br>
                2. 点击"继续前往 localhost (不安全)"
            </div>
        </div>

        <div class="step">
            <h3>步骤2: 测试连接</h3>
            <p>接受证书后，点击下面的按钮测试连接：</p>
            <button class="test-button" onclick="testConnections()">🧪 测试所有连接</button>
            <button class="test-button" onclick="testWebSocket()">🔌 测试WebSocket连接</button>
            <div id="results"></div>
        </div>

        <div class="step">
            <h3>步骤3: 重新加载浏览器扩展</h3>
            <p>测试通过后：</p>
            <ol>
                <li>打开 <code>chrome://extensions/</code></li>
                <li>找到SmartInput扩展</li>
                <li>点击"重新加载"按钮</li>
                <li>测试扩展连接状态</li>
            </ol>
        </div>
    </div>

    <script>
        async function testConnection(url, name) {
            const resultsDiv = document.getElementById('results');
            const statusDiv = document.createElement('div');
            statusDiv.innerHTML = `🔄 测试 ${name}...`;
            statusDiv.className = 'status warning';
            resultsDiv.appendChild(statusDiv);

            try {
                const response = await fetch(url, {
                    method: 'GET',
                    mode: 'cors'
                });
                
                if (response.ok) {
                    const data = await response.json();
                    statusDiv.innerHTML = `✅ ${name} 连接成功！<br><small>状态: ${data.data?.status || 'OK'}</small>`;
                    statusDiv.className = 'status success';
                    return true;
                } else {
                    statusDiv.innerHTML = `❌ ${name} 连接失败 (HTTP ${response.status})`;
                    statusDiv.className = 'status error';
                    return false;
                }
            } catch (error) {
                statusDiv.innerHTML = `❌ ${name} 连接失败<br><small>${error.message}</small>`;
                statusDiv.className = 'status error';
                return false;
            }
        }

        async function testConnections() {
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = '<h4>🧪 连接测试结果：</h4>';

            const urls = [
                { url: 'https://localhost:3001/health', name: 'localhost:3001' },
                { url: 'https://127.0.0.1:3001/health', name: '127.0.0.1:3001' },
                { url: 'https://192.168.137.122:3001/health', name: '192.168.137.122:3001' }
            ];

            let successCount = 0;
            for (const {url, name} of urls) {
                const success = await testConnection(url, name);
                if (success) successCount++;
                await new Promise(resolve => setTimeout(resolve, 500)); // 延迟500ms
            }

            const summaryDiv = document.createElement('div');
            if (successCount === urls.length) {
                summaryDiv.innerHTML = `🎉 所有连接测试通过！现在可以重新加载浏览器扩展了。`;
                summaryDiv.className = 'status success';
            } else if (successCount > 0) {
                summaryDiv.innerHTML = `⚠️ 部分连接成功 (${successCount}/${urls.length})，请检查失败的地址。`;
                summaryDiv.className = 'status warning';
            } else {
                summaryDiv.innerHTML = `❌ 所有连接都失败了，请确保：<br>1. 服务器正在运行<br>2. 已接受SSL证书`;
                summaryDiv.className = 'status error';
            }
            resultsDiv.appendChild(summaryDiv);
        }

        async function testWebSocket() {
            const resultsDiv = document.getElementById('results');
            const statusDiv = document.createElement('div');
            statusDiv.innerHTML = `🔄 测试WebSocket连接...`;
            statusDiv.className = 'status warning';
            resultsDiv.appendChild(statusDiv);

            try {
                const ws = new WebSocket('wss://localhost:3001');
                
                ws.onopen = () => {
                    statusDiv.innerHTML = `✅ WebSocket连接成功！`;
                    statusDiv.className = 'status success';
                    ws.close();
                };

                ws.onerror = (error) => {
                    statusDiv.innerHTML = `❌ WebSocket连接失败<br><small>请确保已接受SSL证书</small>`;
                    statusDiv.className = 'status error';
                };

                ws.onclose = () => {
                    console.log('WebSocket连接已关闭');
                };

                // 5秒超时
                setTimeout(() => {
                    if (ws.readyState === WebSocket.CONNECTING) {
                        ws.close();
                        statusDiv.innerHTML = `❌ WebSocket连接超时`;
                        statusDiv.className = 'status error';
                    }
                }, 5000);

            } catch (error) {
                statusDiv.innerHTML = `❌ WebSocket连接失败<br><small>${error.message}</small>`;
                statusDiv.className = 'status error';
            }
        }

        // 页面加载时显示当前状态
        window.onload = function() {
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = `
                <div class="status warning">
                    💡 <strong>提示</strong>：请先点击上面的HTTPS链接接受证书，然后再进行连接测试。
                </div>
            `;
        };
    </script>
</body>
</html>
